<header>
    <!-- 头部小黑条 -->
   <div class="top_blackLine"></div>
   <div class="header_top wrapper">   
       <div class="header_top_main fl-j">
           <h1>CHANEL</h1>
           <!-- 右边四个图标 -->
           <div class="header_top_main_youbian">
               <ul class="fl-spaceA">
                   <li><a href="#javascript"><i class="iconfont icon-sousuo"></i></a></li>
                   <li><a href="#javascript"><i class="iconfont icon-wode"></i></a></li>
                   <li>
                       <i class="iconfont icon-dizhi"></i>
                       <!-- 地址的二级菜单 -->
                       <div class="dizhi_erji fl">
                           <div>
                               <p>寻找销售店铺</p>
                               <div class="fl-center">
                                   <i class="iconfont icon-dingwei"></i>
                                   <span>所在地</span>
                               </div>
                               <div class="fl" style="width: 100%; height: 40px;">
                                   <input type="text" placeholder="城市/城市" style="width:250px ;">
                                   <div style="width:40px; height:40px; line-height: 40px; text-align:center; margin-top: 0;">
                                       <i class="iconfont icon-sousuo"></i>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </li>
                   <li><a href="#javascript"><i class="iconfont icon-24gl-bag2"></i></a></li>
               </ul>
           </div>
       </div>
   </div>

   <div class="header_bottom wrapper" id="">
       <nav>
           <ul class="fl-spaceA">
               <!-- zhanKai 展开二级菜单 -->
               <li class="zhanKai" id="zhankai" >
                   <a href="#javascript" >香水</a>
                   <!-- erji  二级菜单 -->
                   <div class="erji" id="erji">
                       <div>
                           <div>
                               <h6><a href="#javascript">精选系列</a></h6>
                               <div><a href="#javascript">珍藏系列香水</a></div>
                               <div><a href="#javascript">香奈儿可可小姐香水</a></div>
                               <div><a href="#javascript">香奈儿5号</a></div>
                               <div><a href="#javascript">香奈儿梧桐影木香精高级手工坊礼盒</a></div>
                           </div>
                           <div class="margin-t60">
                               <h6><a href="#javascript">明星系列</a></h6>
                               <div><a href="#javascript">香奈儿身体洗护剂</a></div>
                               <div><a href="#javascript">香水的造艺</a></div>
                               <div><a href="#javascript">新品资讯</a></div>
                               <div><a href="#javascript">男士精选</a></div>
                               <div><a href="#javascript">细节艺术</a></div>
                           </div>
                       </div>

                       <div>
                           <h6><a href="#javascript">女士香水</a></h6>
                           <div><a href="#javascript">5号香水系列</a></div>
                           <div><a href="#javascript">可可小姐香水系列</a></div>  
                           <div><a href="#javascript">嘉柏丽尔香水系列</a></div>
                           <div><a href="#javascript">邂逅香水系列</a></div>
                           <div><a href="#javascript">邂逅清新香水系列</a></div>
                           <div><a href="#javascript">邂逅柔情香水系列</a></div>
                           <div><a href="#javascript">邂逅活力香水系列</a></div>
                           <div><a href="#javascript">可可小姐黑色香水系列</a></div>
                           <div><a href="#javascript">可可香水系列</a></div>
                           <div><a href="#javascript">魅力香水系列</a></div>
                           <div><a href="#javascript">感性魅力香水系列</a></div>
                           <div><a href="#javascript">十九号香水系列</a></div>
                           <div><a href="#javascript">水晶恋香水系列</a></div>
                           <div><a href="#javascript">香奈儿之水珍藏系列香水</a></div>
                       </div>

                       <div>
                           <h6><a href="#javascript">男士香水</a></h6>
                           <div><a href="#javascript">蔚蓝男士香水系列</a></div>
                           <div><a href="#javascript">男士运动香水系列</a></div>
                           <div><a href="#javascript">男士极限运动香水系列</a></div>
                           <div><a href="#javascript">男士香水系列</a></div>
                           <div><a href="#javascript">白色魅力精粹男士香水系列</a></div>
                           <div><a href="#javascript">白金男性香水系列</a></div>
                           <div><a href="#javascript">自我男性香水系列</a></div>
                           <div><a href="#javascript">绅士男性香水系列</a></div>
                           <div><a href="#javascript">力度男性香水系列</a></div>
                           <div><a href="#javascript">香奈儿之水</a></div>
                           <div><a href="#javascript">珍藏系列香水</a></div>
                       </div>

                       <div>
                           <h6><a href="#javascript">套组</a></h6>
                           <div><a href="#javascript">礼物套组</a></div>
                       </div>
                       
                       <div>
                           <span>
                               <a href="#javascript"  id="close">X</a>
                           </span>
                       </div>
                   </div>
               </li>
               <li><a href="#javascript">彩妆</a></li>
               <li><a href="#javascript">护肤品</a></li>
               <li><a href="#javascript"  class="red">N°1 de CHANEL</a></li>
           </ul>
       </nav>
   </div>
</header>

<!-- 这个要放在</body>的下面 -->
<script>
    let headerTwo = document.querySelector('#scroll');
    let close = document.getElementById('close');
    let erji = document.getElementById('erji');
    let zhankai = document.getElementById('zhankai');
    close.addEventListener('click',()=>{
        erji.style.display = 'none';
    })
    zhankai.addEventListener('mousemove',()=>{
        erji.style.display = 'block';
    })
    zhankai.addEventListener('mouseout',()=>{
        erji.style.display = 'none';
    })
</script>